<template>
  <div class="margin-box">
    <v-dialog title="新增消息" :show.sync="dialogVisible" @beforeClose="beforeClose" width="1000px">
      <div class="card-box">
        <el-form ref="messageDetails" label-position="top" :model="messageAdd.sysInfo" class="form-wrap" size="small" :rules="rules">
          <el-form-item label="消息类型" prop="messageType">
            <el-select v-model="messageAdd.sysInfo.messageType" placeholder="请选择">
              <el-option v-for="item in messageTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="接收人" style="margin-left: 9px">
            <el-row :gutter="20">
              <el-col :span="12">
                <div>
                  <el-select v-model="messageAdd.deptList" multiple filterable placeholder="请选择" v-on:change="getDeptUserList()">
                    <el-option v-for="(item,index) in deptList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <el-select v-model="messageAdd.userIdList" multiple filterable placeholder="请选择">
                    <el-option v-for="(item,index) in userIdList" :key="index" :label="item.realName" :value="item.userId"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="消息标题" prop="messageHeader">
            <el-input v-model.trim="messageAdd.sysInfo.messageHeader" maxlength="25"></el-input>
          </el-form-item>
          <el-form-item label="消息内容" prop="msgContent">
            <el-input type="textarea" v-model.trim="messageAdd.sysInfo.msgContent" maxlength="200"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="foot">
        <el-button @click="dialogVisible = false" class="receiver">取 消</el-button>
        <el-button v-throttle="[sendMes]">提 交</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script>
import { getDict } from '~/utils'
import {
  getDept,
  getDeptUser,
  sendMessage,
} from '@/views/wy-asset-management/registration/api/registration.js'

export default {
  data () {
    return {
      //弹出框 初始时隐藏
      dialogVisible: false,
      messageAdd: {
        deptList: [],
        sysInfo: {
          messageType: '',
          messageHeader: '',
          msgContent: '',
        },
        userIdList: [],
      },
      deptList: [],
      userIdList: [],
      messageTypes: [],
      rules: {
        messageType: [
          { required: true, message: '请选择消息类型', trigger: 'blur' },
        ],
        messageHeader: [
          { required: true, message: '请输入消息标题', trigger: 'blur' },
        ],
        msgContent: [
          { required: true, message: '请输入消息内容', trigger: 'blur' },
        ],
      },
    }
  },
  mounted () {
    this.getDeptList()
  },
  created () {
    this.messageTypes = getDict('message_type')
  },
  methods: {
    /**
     * 获取部门
     */
    getDeptList () {
      getDept()
        .then((respData) => {
          this.deptList = respData.data.data
          console.log(this.deptList)
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '部门获取失败',
          })
        })
        .finally(() => (this.loading = false))
    },

    /**
     * 根据部门获取人员
     */
    getDeptUserList () {
      console.log(this.messageAdd.deptList)
      getDeptUser(this.messageAdd.deptList)
        .then((respData) => {
          this.userIdList = respData.data.data
          console.log(this.userIdList)
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '部门人员失败',
          })
        })
        .finally(() => (this.loading = false))
    },

    sendMes () {
      sendMessage(this.messageAdd)
        .then((resp) => {
          this.$message({
            type: 'success',
            message: '发送成功!',
          })
          this.dialogVisible = false
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '发送失败',
          })
          this.dialogVisible = true
        })
    },

    /**
     * 示新增弹框
     */
    show () {
      this.loading = false
      this.dialogVisible = true
    },

    /**
     * 关闭弹窗
     */
    beforeClose () {
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped lang="scss">
.margin-box {
  position: relative;
  .receive::after {
    content: "*";
    position: absolute;
    top: 173px;
    left: 24px;
    display: inline-block;
    margin-right: 10px;
    color: #f57272;
  }
}
</style>
